
<!--
 * @Description: 延期申请
 * @Author: Huang Junjie
 * @Date: 2021-04-13 17:05:40
 * @LastEditTime: 2021-12-25 19:35:31
 * @LastEditors: Huang Junjie
-->
<template>
  <div>
    <base-dialog
      width="980px"
      class="dialog_box"
      :visible.sync="dialog.visible"
      :title="dialog.title"
      :loading="dialog.loading"
      :disabled="dialog.disabled"
      confirm-text="提交"
      @updateData="updateData"
      @open="beforeOpenDialog">
      <el-form
        ref="dataForm"
        :model="dialog.form"
        :rules="rules"
        :disabled="dialog.disabled"
        label-width="0px">
        <table id="look-data">
          <tbody v-for="(item, key) in data" :key="key">
            <tr v-if="item.type ==='text'">
              <td>{{ item.column1 }}</td>
              <td v-if="item.column2">{{ item.column2 }}</td>
              <td v-else>无</td>
              <td>{{ item.column3 }}</td>
              <td v-if="item.column4">{{ item.column4 }}</td>
              <td v-else>无</td>
              <td>{{ item.column5 }}</td>
              <td v-if="item.column6">{{ item.column6 }}</td>
              <td v-else-if="item.column6 === null">无</td>
              <td v-else />
            </tr>
            <tr v-if="item.type ==='textarea'">
              <td>{{ item.column1 }}</td>
              <td v-if="item.column2" colspan="6">{{ item.column2 }}</td>
              <td v-else colspan="6">无</td>
            </tr>
            <tr v-if="item.type ==='file'">
              <td>{{ item.column1 }}</td>
              <td colspan="6" class="file-box">
                <upload-file
                  v-if="dialog.visible && item.column2 && item.column2.length"
                  ref="upload"
                  :model="fileModalPillarImages" />
                <span v-else>无</span>
              </td>
            </tr>
            <tr v-if="item.type ==='file1'">
              <td>{{ item.column1 }}</td>
              <td colspan="6" class="file-box">
                <upload-file
                  v-if="dialog.visible && item.column2 && item.column2.length"
                  ref="upload"
                  :model="fileModalDefectImages" />
                <span v-else>无</span>
              </td>
            </tr>
            <tr v-if="item.type ==='delay'">
              <td>{{ item.column1 }}</td>
              <td>
                <el-form-item label="" prop="applyWorkareaId">
                  <el-select v-model="dialog.form.applyWorkareaId" clearable>
                    <el-option
                      v-for="list in dataList.deptList"
                      :key="list.id"
                      :label="list.deptName"
                      :value="list.deptId" />
                  </el-select>
                </el-form-item>
              </td>
              <td>{{ item.column3 }}</td>
              <td>
                <el-form-item label="" prop="deferredTime" class="rectif-datetime">
                  <el-input v-model="dialog.form.deferredTime" placeholder="" class="input-with-select" @change="getdefectDefDay">
                    <el-select slot="append" v-model="dialog.form.deferredTimeUnit" placeholder="单位" @change="getdefectDefDay">
                      <el-option v-for="(list, index) in dataList.rectifTimeUnitList" :key="index" :label="list.itemName" :value="list.dictionaryId" />
                    </el-select>
                  </el-input>
                </el-form-item>
              </td>
              <td>{{ item.column5 }}</td>
              <td>{{ item.column6 }}</td>
            </tr>
            <tr v-if="item.type === 'defectDate'">
              <td>{{ item.column1 }}</td>
              <td colspan="5">
                <el-date-picker
                  v-model="dialog.form.defectDate"
                  type="date"
                  placeholder="预计处理日期"
                  :clearable="false"
                  :disabled="true"
                  style="width: 150px;" />
              </td>
            </tr>
            <tr v-if="item.type ==='textareaInput'">
              <td>{{ item.column1 }}</td>
              <td colspan="6">
                <el-form-item label="" prop="mero">
                  <el-input v-model="dialog.form.mero" type="textarea" :autosize="{ minRows: 4}" maxlength="500" />
                </el-form-item>
              </td>
            </tr>
          </tbody>
        </table>
      </el-form>
    </base-dialog>
  </div>
</template>

<script>
import {
  getByParams,
  getInfoByIdDevice,
  saveOrUpdateDeferred,
  getdefectDefDay
} from '@/api/jcwwtk/information'
// import UploadFile from '@/views/jcwsc/components/UploadFile'
import { findWorkDeptList } from '@/api/basic-data/common'

export default {
  components: {
    // UploadFile
  },
  props: {
    dialog: {
      type: Object,
      default() {
        return {}
      }
    },
    defectType: { // 类型
      type: String,
      default() {
        return ''
      }
    }
  },
  data() {
    var checkRectifTime = (rule, value, cb) => {
      if (value && !this.dialog.form.deferredTimeUnit) {
        return cb(new Error('请选择单位'))
      } else {
        cb()
      }
    }
    return {
      rules: {
        applyWorkareaId: { required: true, message: '请选择', trigger: 'change' },
        deferredTime: [
          { required: true, message: '请输入', trigger: 'blur' },
          { pattern: /^\d{1,}$/, message: '请输入整数' },
          { validator: checkRectifTime, trigger: 'blur' }
        ],
        mero: { required: true, message: '请输入', trigger: 'blur' }
      },

      // 下拉框信息列表
      dataList: {
        dataList: [],
        rectifTimeUnitList: []
      },

      // 查看页面数据
      data: [],

      // 杆号-附件配置
      fileModalPillarImages: {
        title: '',
        visible: false,
        pathList: [],
        fileList: [],
        type: 1,
        bizType: '1',
        key: 0,
        index: 0,
        isDetail: true,
        uploadType: 'file'
      },

      // 缺陷-附件配置
      fileModalDefectImages: {
        title: '',
        visible: false,
        pathList: [],
        fileList: [],
        type: 1,
        bizType: '1',
        key: 0,
        index: 0,
        isDetail: true,
        uploadType: 'file'
      }
    }
  },
  watch: {
    'dialog.visible'() {
      if (this.dialog.visible) {
        this.data = []
        this.getInfoById(this.dialog.form.id) // 根据id查询信息
      }
    }
  },
  methods: {
    // 根据id查询信息
    getInfoById(id) {
      // 接触网问题库整改周期单位(天、月、日)
      getByParams({ unitCodeParams: this.dialog.form.unitCodeParams, dtId: 'JCW_DEFECT_UNIT' }).then((response) => {
        if (response.data && response.data.length) {
          this.dataList.rectifTimeUnitList = response.data
          this.dataList.rectifTimeUnitList.forEach(val => {
            if (val.itemName === '月') {
              this.$set(this.dialog.form, 'deferredTimeUnit', val.dictionaryId)
              // this.dialog.form.deferredTimeUnit = val.dictionaryId
            }
          })
        }
      })

      // 获取接触网工区
      findWorkDeptList({ unitCodeParams: this.dialog.form.unitCodeParams }).then(response => {
        this.dataList.deptList = response.data
      })

      // 根据id查询信息
      getInfoByIdDevice({
        unitCodeParams: this.dialog.form.unitCodeParams,
        id: id
      }).then(response => {
        response = response.data

        // 组装附件（用于回显）
        var fileArr = []
        if (response.pillarImagesList && response.pillarImagesList.length) {
          response.pillarImagesList.forEach(item => {
            fileArr.push(item.filePath)
          })
          this.showFile(fileArr, 1, 0, 0, true, response.pillarImagesList) // 杆号照片显示附件
        }
        fileArr = []
        if (this.defectType === '1') {
          if (response.defectImagesList && response.defectImagesList.length) {
            response.defectImagesList.forEach(item => {
              fileArr.push(item.filePath)
            })
            this.showFile1(fileArr, 1, 0, 0, true, response.defectImagesList) // 缺陷照片显示附件
          }
        }

        this.data = [
          {
            column1: '线路',
            column2: response.seclineName,
            column3: '区间站场',
            column4: response.siteName,
            column5: '行别',
            column6: response.directionName,
            type: 'text'
          },
          {
            column1: '股道',
            column2: this.trackName,
            column3: '隧道',
            column4: response.tunnelName,
            column5: '支柱号',
            column6: response.pillarNum,
            type: 'text'
          },
          {
            column1: '缺陷等级',
            column2: response.defectGradeName,
            column3: '发现日期',
            column4: response.discoverDate,
            column5: '整改期限',
            column6: (response.rectifTimeUnitText.indexOf !== '月' ? response.rectifTime + '个月' : response.rectifTime + response.rectifTimeUnitText) || response.rectifDatetime,
            type: 'text'
          },
          {
            column1: '问题描述',
            column2: response.defectInfoDesc,
            type: 'textarea'
          },
          {
            column1: '杆号照片',
            column2: response.pillarImagesList,
            type: 'file'
          },
          {
            column1: '缺陷照片',
            column2: response.defectImagesList,
            type: 'file1'
          },
          {
            column1: '延期申请部门',
            column2: response.defectReasonName,
            column3: '延期期限',
            column4: response.solvePersonal,
            column5: '延期状态',
            column6: '第 ' + (parseFloat(response.deferredCount) + 1) + ' 次延期',
            type: 'delay'
          },
          {
            column1: '预计处理日期',
            column2: response.defectDate,
            type: 'defectDate'
          },
          {
            column1: '申请延期原因及过渡安全措施',
            column2: response.defectInfoDesc,
            type: 'textareaInput'
          }
        ]
      })
    },

    // 获取预计日日
    getdefectDefDay() {
      if (this.dialog.form.deferredTime !== '' && this.dialog.form.deferredTime !== undefined) {
        // 获取预计日日
        getdefectDefDay({
          defectInfoId: this.dialog.form.id,
          defectType: 'device',
          deferredTime: this.dialog.form.deferredTime,
          deferredTimeUnit: this.dialog.form.deferredTimeUnit,
          unitCodeParams: this.dialog.form.unitCodeParams
        }).then(response => {
          const res = response.data
          this.$set(this.dialog.form, 'defectDate', res)
        })
      }
    },

    // 杆号照片-显示附件
    showFile(pathList, type, key, index, isDetail, fileList) {
      this.fileModalPillarImages = {
        title: '',
        visible: true,
        pathList: pathList,
        fileList: fileList,
        type,
        bizType: '1',
        key,
        index,
        isDetail: isDetail,
        uploadType: 'file'
      }
    },

    // 缺陷照片-显示附件
    showFile1(pathList, type, key, index, isDetail, fileList) {
      this.fileModalDefectImages = {
        title: '',
        visible: true,
        pathList: pathList,
        fileList: fileList,
        type,
        bizType: '1',
        key,
        index,
        isDetail: isDetail,
        uploadType: 'file'
      }
    },

    // 回调方法
    updateData() {
      this.$refs.dataForm.validate((valid) => {
        if (valid) {
          this.dialog.loading = true
          var form = {
            applyWorkareaId: this.dialog.form.applyWorkareaId,
            defectInfoId: this.dialog.form.id,
            deferredTime: this.dialog.form.deferredTime,
            deferredTimeUnit: this.dialog.form.deferredTimeUnit,
            mero: this.dialog.form.mero
          }
          // defectType(缺陷类型) device:设备缺陷 bird：鸟类缺陷 tree：树木缺陷 other：其他缺陷
          form.defectType = 'device'
          saveOrUpdateDeferred(form).then(() => {
            this.notifiySuccess('保存成功')
            this.$emit('updateData')
            this.dialog.loading = false
            this.dialog.visible = false
          }).catch(() => {
            this.dialog.loading = false
          })
        }
      })
    },

    // 打开弹框前执行
    beforeOpenDialog() {}
  }
}
</script>

<style lang="scss" scoped>
  #look-data {
    border-collapse: collapse;
    width: 100%;
  }
  #look-data td, #look-data th {
    border: 1px solid #DFE6EC;
    font-size: 16px;
    line-height: 1.5;
    padding: 8px 0;
  }
  #look-data tr td:nth-child(odd){
    width: 15%;
    max-width: 20px;
    padding-left: 0px;
    padding-right: 10px;
    text-align: right;
    background: #E9F2FC;
  }
  #look-data tr td:nth-child(even){
    max-width: 20px;
    padding-left: 10px;
    padding-right: 10px;
    word-wrap: break-word;
    overflow: hidden;
  }
  .dialog_box #look-data tr td.file-box {
    width: 100%;
    text-align: left;
    background: #ffffff;
  }
  #look-data .file-content {
    min-height: 187px;
  }
  ::v-deep .el-dialog {
    .el-dialog__body {
      min-height: calc(80vh - 100px) !important;
      .el-form-item {
        margin-bottom: 0px;
      }
      .is-error.el-form-item {
        margin-bottom: 10px;
      }
      .rectif-datetime {
        .el-select .el-input {
          width: 80px;
        }
        .el-input-group__prepend {
          background-color: #fff;
        }
      }
    }
  }
</style>
